<template>
  <el-form :model="form" ref="ruleForm" label-width="100px" size="small">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-row type="flex" justify="left">
          <el-col :span="12">
            <el-form-item label="服务URL">
              <el-input v-model="form.servUrl"></el-input>
            </el-form-item>
            <el-form-item label="服务名称">
              <el-input v-model="form.servName"></el-input>
            </el-form-item>
            <el-form-item label="数据描述">
              <el-input type="textarea" v-model="form.servDescribe"></el-input>
            </el-form-item>
            <el-form-item label="发布单位">
              <el-input v-model="form.servUnit"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="form.servUser"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="form.servPhone"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="form.servEmail"></el-input>
            </el-form-item>
            <el-form-item label="联系人地址">
              <el-input v-model="form.servAddress"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-tag
                  :key="tag"
                  v-for="tag in form.servKeyword"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="上传预览图片" style="padding-top: 20px">
              <el-input v-model="form.servImg" type="file"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-left: 40%">
          <el-button type="mini" @click="cancel">取消</el-button>
          <el-button type="mini" @click="nextPage(1)">下一步</el-button>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="详细信息" name="second">
        <el-row type="flex" justify="left">
          <el-col :span="12">
            <el-form-item label="是否追加数据">
              <el-radio-group v-model="form.servAdd">
                <el-radio :label="1">新增图层</el-radio>
                <el-radio :label="2">追加历史数据</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="空间数据类型">
              <el-radio-group v-model="form.servDataType">
                <el-radio :label="1">shp</el-radio>
                <el-radio :label="2">dem</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发布方案">
              <el-radio-group v-model="form.servPlan">
                <el-radio :label="1">点</el-radio>
                <el-radio :label="2">线</el-radio>
                <el-radio :label="3">面</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="实体形成时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.servEntityCreated"></el-date-picker>
            </el-form-item>
            <el-form-item label="实体消失时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.servEntityDestroy"></el-date-picker>
            </el-form-item>
            <el-form-item label="数据生成时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.servDataCreated"></el-date-picker>
            </el-form-item>
            <el-form-item label="数据更新时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.servDataUpdate"></el-date-picker>
            </el-form-item>

            <el-form-item label="导入空间数据">
              <el-input v-model="form.servDataUrl" type="file"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地图范围">
              <el-select v-model="form.servRange" placeholder="地图范围">
                <el-option label="市" :value="1"></el-option>
                <el-option label="区县" :value="2"></el-option>
                <el-option label="村镇" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="可见方式">
              <el-select v-model="form.servLimit" placeholder="可见方式">
                <el-option label="可见" :value="1"></el-option>
                <el-option label="条件可见" :value="2"></el-option>
                <el-option label="线下" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择部门">
              <el-select v-model="form.servDepartment" placeholder="选择部门" >
                <el-option label="部门1" :value="1"></el-option>
                <el-option label="部门2" :value="2"></el-option>
                <el-option label="部门3" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择目录">
              <el-select v-model="form.servSpecial" placeholder="选择目录" >
                <el-option label="目录1" :value="1"></el-option>
                <el-option label="目录2" :value="2"></el-option>
                <el-option label="目录3" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="坐标系">
              <el-input v-model="form.servCoordinate"></el-input>
            </el-form-item>
            <el-form-item label="比例尺">
              <el-input v-model="form.servRatio"></el-input>
            </el-form-item>
            <el-form-item label="高程">
              <el-input v-model="form.servAltitude"></el-input>
            </el-form-item>
            <el-form-item label="历史版本">
              <el-input v-model="form.servEdition"></el-input>
<!--              <el-radio-group v-model="form.servEdition">-->
<!--                <el-radio :label="1">2019年数据</el-radio>-->
<!--                <el-radio :label="2">2020年数据</el-radio>-->
<!--                <el-radio :label="3">2021年数据</el-radio>-->
<!--              </el-radio-group>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-left: 40%">
          <el-button type="mini" @click="previousPage(2)">上一步</el-button>
          <el-button type="mini" @click="nextPage(2)">下一步</el-button>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="使用帮助" name="third">
        <el-form-item label="上传文档">
          <el-input v-model="form.servApi" type="file"></el-input>
        </el-form-item>
        <el-row style="padding-left: 40%">
          <el-button type="mini" @click="previousPage(3)">上一步</el-button>
          <el-button type="mini" @click="update">完成</el-button>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import {updatedService, queryServiceById} from "@/api/data_center/application-service";

/**
 *{ 数据服务修改 }
 * @param:
 * @author: 马凯
 * @DateTime: 2022/8/2
 */
export default {
  name: "DataServiceCreate",
  data() {
    return {
      activeName: 'first',
      id: this.$route.query.id  || '0',
      form: {
        servUrl : '',
        servName : '',
        servDescribe : '',
        servDate : '',
        servUnit : '',
        servUser : '',
        servPhone : '',
        servEmail : '',
        servAddress : '',
        servKeyword : [],
        servImg : '',
        servType : "",
        servState : "",
        servAdd : '',
        servDataType : '',
        servEntityCreated : '',
        servEntityDestroy : '',
        servDataCreated : '',
        servDataUpdate : '',
        servDataUrl : '',
        servRange : '',
        servLimit : '',
        servDepartment : '',
        servSpecial : '',
        servCoordinate : '',
        servRatio : '',
        servAltitude : '',
        servPlan : '',
        servEdition : '',
        servApi : '',
      },
      /**
       * 关键词
       */
      inputVisible: false,
      inputValue: ''
    }
  },
  mounted() {
    /**
     * 根据id查询
     */
    this.queryById(this.id)
  },
  methods: {
    /**
     * 修改服务
     */
    update() {
      let form = this.form;
      let formData = new FormData
      let servId = this.id
      formData.append('servId', servId)
      formData.append('servUrl', form.servUrl)
      formData.append('servName', form.servName)
      formData.append('servDescribe', form.servDescribe)
      formData.append('servDate', form.servDate)
      formData.append('servUnit', form.servUnit)
      formData.append('servUser', form.servUser)
      formData.append('servPhone', form.servPhone)
      formData.append('servEmail', form.servEmail)
      formData.append('servAddress', form.servAddress)
      formData.append('servKeyword', form.servKeyword)
      formData.append('servImg', form.servImg)
      formData.append('servType', form.servType)
      formData.append('servState', form.servState)
      formData.append('servAdd', form.servAdd)
      formData.append('servDataType', form.servDataType)
      formData.append('servEntityCreated', form.servEntityCreated)
      formData.append('servEntityDestroy', form.servEntityDestroy)
      formData.append('servDataCreated', form.servDataCreated)
      formData.append('servDataUpdate', form.servDataUpdate)
      formData.append('servDataUrl', form.servDataUrl)
      formData.append('servRange', form.servRange)
      formData.append('servLimit', form.servLimit)
      formData.append('servDepartment', form.servDepartment)
      formData.append('servSpecial', form.servSpecial)
      formData.append('servCoordinate', form.servCoordinate)
      formData.append('servRatio', form.servRatio)
      formData.append('servAltitude', form.servAltitude)
      formData.append('servPlan', form.servPlan)
      formData.append('servEdition', form.servEdition)
      formData.append('servApi', form.servApi)
      updatedService(formData).then(res=>{
        this.$router.go(-1);
        if(res.status){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        }else {
          this.$message.error('操作失败');
        }
      })
    },
    /**
     * 根据id查询
     * @param servId
     */
    queryById(servId) {
      queryServiceById(servId).then(res=>{
        let data = res.data;
        this.form.servUrl = data.servUrl;
        this.form.servName = data.servName;
        this.form.servDescribe = data.servDescribe;
        // this.servDate = new Date,
        this.form.servUnit = data.servUnit;
        this.form.servUser = data.servUser;
        this.form.servPhone = data.servPhone;
        this.form.servEmail = data.servEmail;
        this.form.servAddress = data.servAddress;
        this.form.servKeyword = data.servKeyword.split(",");
        this.form.servImg = data.servImg;
        this.form.servType = data.servType;
        this.form.servState = data.servState;
        this.form.servAdd = data.servAdd;
        this.form.servDataType = data.servDataType;
        this.form.servEntityCreated = data.servEntityCreated;
        this.form.servEntityDestroy = data.servEntityDestroy;
        this.form.servDataCreated = data.servDataCreated;
        this.form.servDataUpdate = data.servDataUpdate;
        this.form.servDataUrl = data.servDataUrl;
        this.form.servRange = data.servRange;
        this.form.servLimit = data.servLimit;
        this.form.servDepartment = data.servDepartment;
        this.form.servSpecial = data.servSpecial;
        this.form.servCoordinate = data.servCoordinate;
        this.form.servRatio = data.servRatio;
        this.form.servAltitude = data.servAltitude;
        this.form.servPlan = data.servPlan;
        this.form.servEdition = data.servEdition;
        this.form.servApi = data.servApi;
      })
    },
    /**
     *
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /**
     * 取消添加/修改
     */
    cancel() {
      this.$router.go(-1)
    },
    /**
     * 下一页
     * @param page
     */
    nextPage(page) {
      if (page === 1){
        this.activeName = 'second';
      }else if (page === 2) {
        this.activeName = 'third';
      }
    },
    /**
     * 上一页
     * @param page
     */
    previousPage(page) {
      if (page === 2){
        this.activeName = 'first';
      }else if (page === 3) {
        this.activeName = 'second';
      }
    },
    /**
     * 关键词
     */
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs['saveTagInput'].$refs.input.focus();
      });
    },
    /**
     * 删除关键词
     * @param tag
     */
    handleClose(tag) {
      this.form.servKeyword.splice(this.form.servKeyword.indexOf(tag), 1);
    },
    /**
     * 添加关键词
     */
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.servKeyword.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
  }
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
img {
  border:2px solid #8f8e8e
}
.el-form {
  .el-form-item {
    .el-input {
      width: 400px;
    }
    .el-select {
      width: 400px;
    }
    .el-textarea {
      width: 400px;
    }
  }
}
</style>
